<template>
  <div>
    <div class="btn_wrapper">
      <el-row type="flex" justify="space-between">
        <span class="explain">说明：目前支持学科和关键字条件筛选</span>
        <el-button
          type="success"
          icon="el-icon-edit"
          size="small"
          @click="$router.push('/questions/new')"
          >新增试题</el-button
        >
      </el-row>
    </div>
    <el-form ref="searchForm" :model="formData" size="small">
      <el-row>
        <el-col :span="6">
          <el-form-item label="学科" label-width="80px">
            <el-select
              placeholder="请选择"
              style="width: 100%"
              v-model="formData.subjectID"
              @change="subjectSelect"
              :popper-append-to-body="false"
            >
              <el-option
                v-for="item in subjectList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="二级目录" label-width="80px">
            <el-select
              placeholder="请选择"
              style="width: 100%"
              v-model="formData.directoryName"
            >
              <el-option
                v-for="item in directorys"
                :key="item.id"
                :label="item.directoryName"
                :value="item.directoryName"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="标签" label-width="80px">
            <el-select
              placeholder="请选择"
              style="width: 100%"
              v-model="formData.tagName"
            >
              <el-option
                v-for="item in tags"
                :key="item.id"
                :label="item.tagName"
                :value="item.tagName"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="关键字" label-width="80px">
            <el-input
              placeholder="根据题干搜索"
              v-model="formData.keyword"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="试题类型" label-width="80px">
            <el-select
              placeholder="请选择"
              style="width: 100%"
              v-model="formData.questionType"
            >
              <el-option
                v-for="item in questionType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="难度" label-width="80px">
            <el-select
              placeholder="请选择"
              style="width: 100%"
              v-model="formData.difficulty"
            >
              <el-option
                v-for="item in difficulty"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="方向" label-width="80px">
            <el-select
              placeholder="请选择"
              style="width: 100%"
              v-model="formData.direction"
            >
              <el-option
                v-for="(item, index) in direction"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="录入人" label-width="80px">
            <el-select
              placeholder="请选择"
              style="width: 100%"
              v-model="formData.username"
            >
              <el-option label="超级管理员" value="超级管理员"></el-option>
              <el-option label="录入管理员" value="录入管理员"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="题目备注" label-width="80px">
            <el-input v-model="formData.remarks"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="企业简称" label-width="80px">
            <el-input v-model="formData.shortName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="城市" label-width="80px">
            <el-select
              placeholder="请选择"
              style="width: 50%"
              v-model="formData.city"
              @change="changeCity(formData.city)"
            >
              <el-option
                v-for="(item, index) in city"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
            <el-select
              placeholder="请选择"
              style="width: 50%"
              v-model="formData.area"
            >
              <el-option
                v-for="(item, index) in area"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-row type="flex" justify="end">
              <el-button @click="clearAll">清除</el-button>
              <el-button type="primary" @click="search">搜索</el-button>
            </el-row>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { simple } from '@/api/hmmm/subjects'
import { list as directorysList } from '@/api/hmmm/directorys'
import { list as tagsList } from '@/api/hmmm/tags'
import { provinces, citys } from '@/api/hmmm/citys'
import { direction, questionType, difficulty } from '@/api/hmmm/constants'
export default {
  data() {
    return {
      formData: {
        subjectID: '', // 学科
        directoryName: '', // 目录
        tagName: '', // 标签
        username: '', // 录入人
        keyword: '', // 关键字
        remarks: '', // 题目备注
        questionType: '', // 题型
        city: '',
        shortName: '', // 企业简称
        direction: '', // 方向
        area: ''
      },
      subjectList: [],
      directorys: [],
      tags: [],
      city: [],
      area: [],
      direction,
      questionType,
      difficulty
    }
  },
  created() {
    this.getSubjectList()
    this.provinces()
    this.directorysList()
  },
  methods: {
    async getSubjectList() {
      // const { data: res } = await list({ page: 1, pagesize: 20 })
      const { data: result } = await simple()
      console.log(result, 80)
      this.subjectList = result
      // console.log(res, 999)
    },
    async directorysList() {
      // const { data: res } = await directorysList({ subjectID: 4 })
    },
    // 获取下拉框里的学科列表 对应的目录列表以及标签列表
    async subjectSelect(val) {
      // console.log(val)
      const { data: res } = await directorysList({ subjectID: val })
      this.directorys = res.items
      const { data: result } = await tagsList({ subjectID: val })
      this.tags = result.items
      // console.log(result, 444)
      this.formData.directoryName = ''
      this.formData.tagName = ''
    },
    // 获取所有城市
    provinces() {
      this.city = provinces()
    },
    // 获取城市下所有地区
    changeCity(pname) {
      this.area = citys(pname)
      this.formData.area = ''
    },
    // 清除所有表单
    clearAll() {
      this.formData = {
        subjectID: '', // 学科
        directoryName: '', // 目录
        tagName: '', // 标签
        username: '', // 录入人
        keyword: '', // 关键字
        remarks: '', // 题目备注
        questionType: '', // 题型
        city: '',
        shortName: '', // 企业简称
        direction: '', // 方向
        area: ''
      }
      // console.log(this.$refs.searchForm)
      this.$refs.searchForm.resetFields()
      this.$emit('resetList')
    },
    // 搜索
    search() {
      this.$emit('search', this.formData)
    }
  }
}
</script>

<style lang="scss" scoped>
.btn_wrapper {
  margin-bottom: 10px;
  .explain {
    color: pink;
    font-size: 12px;
  }
}

.el-row {
  display: flex;
  flex-wrap: wrap;
}
// .el-input__inner {
//     height: 32px !important;
//     line-height: 32px !important;
//   }
</style>
